<template>
  <div class="bussiness">
    <van-tabs v-model="curTab" border @rendered="rendertab" sticky line-width="26px" title-active-color="#FE9200" color="#FE9200" swipeable animated>
      <van-tab title="我的收藏">
        <van-list v-if="collectBussinessList.length" v-model="loading1" :finished="finished1" finished-text="没有更多了" @load="loadCollectBussinessList">
          <ul class="list">
            <li class="list-option" v-for="(item, index) in collectBussinessList" :key="index" @click="routerTo(`bussinessDetail?id=${item.id}`)">
              <div class="header">
                <div class="left">
                  <img :src="item.user.headImgUrl" alt="" />
                  <div class="userinfo">
                    <p>{{ item.user.nickname }}</p>
                    <p class="van-ellipsis">{{ item.user.company }}</p>
                  </div>
                </div>
              </div>
              <div class="content">
                <div class="detail van-multi-ellipsis--l2">
                  <span class="type">{{ getTypeText(item.type) }}</span>
                  <span>{{ item.content }}</span>
                </div>
                <div class="tag-list" v-if="item.labelList && item.labelList.length">
                  <span v-for="(todo, k) in item.labelList" :key="k">{{ todo }}</span>
                </div>
                <div class="img-list" v-if="item.pictureList.length">
                  <van-image fit="cover" @click.stop="previewImg(index, k, 1)" v-for="(todo, k) in item.pictureList" :key="k" :src="todo" width="100" height="100" />
                </div>
              </div>
              <div class="footer van-hairline--top">
                <span>阅读 {{ item.readNum }}</span>
                <ul>
                  <li @click.stop="handleCollect(item.id, index)">
                    <span style="color: #fe9100">取消收藏</span>
                    <img src="@assets/images/collect_selected.png" alt="" />
                  </li>
                  <li @click.stop="deliveryCard(item.id)">
                    <span>递名片</span>
                    <img src="@assets/images/cooperation.png" alt="" />
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </van-list>
        <Empty v-else>
          <van-button class="empty-btn" color="#ff9100" round to="/bussiness">去发布</van-button>
        </Empty>
      </van-tab>
      <van-tab title="我的发布">
        <van-list v-if="publishBussinessList.length" v-model="loading2" :finished="finished2" finished-text="没有更多了" @load="loadPublishBussinessList">
          <ul class="list">
            <li class="list-option" v-for="(item, index) in publishBussinessList" :key="index" @click="routerTo(`bussinessDetail?id=${item.id}`)">
              <div class="header">
                <div class="left">
                  <img :src="item.user.headImgUrl" alt="" />
                  <div class="userinfo">
                    <p>{{ item.user.nickname }}</p>
                    <p class="van-ellipsis">{{ item.user.company }}</p>
                  </div>
                </div>
                <div class="right">
                  <span class="edit-btn" v-if="item.status === 3" @click.stop="routerTo(`bussinessRelease?id=${item.id}`)">编辑</span>
                  <span :class="['status-btn', item.status === 1 ? 'waitting' : item.status === 2 ? 'success' : 'fail']">{{ item.status === 1 ? '待审核' : item.status === 2 ? '已通过' : '未通过' }}</span>
                </div>
              </div>
              <div class="content">
                <div class="detail van-multi-ellipsis--l2">
                  <span class="type">{{ getTypeText(item.type) }}</span>
                  <span>{{ item.content }}</span>
                </div>
                <div class="tag-list" v-if="item.labelList && item.labelList.length">
                  <span v-for="(todo, k) in item.labelList" :key="k">{{ todo }}</span>
                </div>
                <div class="img-list" v-if="item.pictureList.length">
                  <van-image fit="cover" @click.stop="previewImg(index, k, 2)" v-for="(todo, k) in item.pictureList" :key="k" :src="todo" width="100" height="100" />
                </div>
              </div>
              <div class="footer van-hairline--top">
                <span>阅读 {{ item.readNum }}</span>
              </div>
              <van-button class="delete-btn" block color="#f2f3f5" @click.stop="deleteBussiness(item.id, index)" v-if="item.status !== 2">删除</van-button>
            </li>
          </ul>
        </van-list>
        <Empty v-else>
          <van-button class="empty-btn" color="#ff9100" round to="/bussiness">去发布</van-button>
        </Empty>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Tab, Tabs, Button, List, Dialog, Toast, Image, ImagePreview } from 'vant';
import Empty from '@components/empty';
import { business_getCollectBusinessList, business_getPublishBusinessList } from '@api/user';
import { business_deliveryCard, business_collectBusiness, business_cancelCollect, business_deleteBusiness } from '@api/bussiness';
export default {
  components: {
    Empty,
    [Image.name]: Image,
    [Button.name]: Button,
    [List.name]: List,
    [Dialog.Component.name]: Dialog.Component,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      curTab: 0,
      content: '',
      pageSize: 10,
      loading1: false,
      finished1: false,
      pageNum1: 1,
      loading2: false,
      finished2: false,
      pageNum2: 1,
      type: 0,
      collectBussinessList: [],
      publishBussinessList: []
    };
  },
  computed: {
    ...mapGetters(['bussinessTypeList'])
  },
  methods: {
    rendertab() {
      if (this.curTab === 0) {
        this.getCollectBussinessList();
      } else {
        this.getPublishBussinessList();
      }
    },
    loadCollectBussinessList() {
      this.pageNum1++;
      this.getCollectBussinessList();
    },
    loadPublishBussinessList() {
      this.pageNum2++;
      this.getPublishBussinessList();
    },
    // 取消收藏
    async handleCollect(businessId, index) {
      let res = await business_cancelCollect({ businessId });
      if (res.code === 200) {
        this.collectBussinessList.splice(index, 1);
      } else {
        Toast(res.msg);
      }
    },
    getTypeText(type) {
      return this.bussinessTypeList.find(item => {
        return item.id === type;
      }).text;
    },
    previewImg(index, k, type) {
      let arr = [];
      if (type === 1) {
        arr = this.collectBussinessList[index].pictureList.map(item => {
          return item.split('?')[0];
        });
      } else {
        arr = this.publishBussinessList[index].pictureList.map(item => {
          return item.split('?')[0];
        });
      }
      ImagePreview({
        images: arr,
        startPosition: k
      });
    },
    //投递名片
    deliveryCard(businessId) {
      Dialog.confirm({
        message: '投递名片将会把您的个人信息\n 发送给对方，是否投递',
        confirmButtonColor: '#f09637'
      }).then(() => {
        business_deliveryCard({ businessId }).then(res => {
          if (res.code === 200) {
            Toast('名片投递成功');
          } else {
            Toast(res.msg);
          }
        });
      });
    },
    //我的发布商机
    async getPublishBussinessList() {
      const { pageNum2, pageSize } = this;
      let res = await business_getPublishBusinessList({ pageNum: pageNum2, pageSize });
      if (res.code === 200) {
        this.publishBussinessList = this.publishBussinessList.concat(res.data.list);
        this.loading2 = false;
        if (pageNum2 >= Math.ceil(res.data.totalNum / pageSize)) {
          this.finished2 = true;
        }
      } else {
        Toast(res.msg);
      }
    },
    // 我的收藏商机
    async getCollectBussinessList() {
      const { pageNum1, pageSize } = this;
      let res = await business_getCollectBusinessList({ pageNum: pageNum1, pageSize });
      if (res.code === 200) {
        this.collectBussinessList = this.collectBussinessList.concat(res.data.list);
        this.loading1 = false;
        if (pageNum1 >= Math.ceil(res.data.totalNum / pageSize)) {
          this.finished1 = true;
        }
      } else {
        Toast(res.msg);
      }
    },
    // 删除我发布的商机
    deleteBussiness(businessId, index) {
      Dialog.confirm({
        message: '确认删除该商机吗？',
        confirmButtonColor: '#fe9200'
      })
        .then(() => {
          business_deleteBusiness({ businessId }).then(res => {
            if (res.code === 200) {
              this.publishBussinessList.splice(index, 1);
            } else {
              Toast(res.msg);
            }
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.bussiness {
  background: #fff;
}
.empty-btn {
  width: 360px;
  font-size: 32px;
  font-weight: bold;
}
.list {
  padding: 30px;
  &-option {
    margin-bottom: 36px;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        img {
          width: 76px;
          height: 76px;
          border-radius: 50%;
          margin-right: 18px;
        }
      }
      .userinfo {
        font-size: 22px;
        color: #818b9d;
        width: 320px;
        p:first-child {
          font-size: 28px;
          font-weight: bold;
          color: #121c32;
          margin-bottom: 13px;
        }
      }
      .edit-btn {
        display: inline-block;
        color: #fe9200;
        background-color: #fdf4e7;
        font-size: 22px;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 18px;
        font-weight: bold;
      }
      .status-btn {
        margin: 0 18px;
        display: inline-block;
        font-size: 22px;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 18px;
        font-weight: bold;
        &.success {
          color: #828c9e;
          background-color: #f2f3f5;
        }
        &.waitting {
          color: #36a6fb;
          background-color: #ecf6fe;
        }
        &.fail {
          color: #ff0707;
          background-color: #fbe7e7;
        }
      }
    }
    .delete-btn {
      line-height: 80px;
      height: 80px;
      border-radius: 4px;
      color: #818b9d !important;
    }
    .content {
      margin: 25px 0;
      .img-list {
        display: flex;
        flex-wrap: wrap;
        .van-image {
          margin: 0 15px 15px 0;
        }
      }
      .detail {
        color: #121c32;
        font-size: 30px;
        line-height: 46px;
      }
      .type {
        background: #f4be88;
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        display: inline-block;
        color: #53360e;
        font-size: 22px;
        border-radius: 3px;
        margin-right: 20px;
      }
      .tag-list {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        span {
          padding: 8px 18px;
          color: #35a6fb;
          background: #ebf7fd;
          border-radius: 18px;
          font-size: 22px;
          margin: 15px 15px 0 0;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      color: #818b9d;
      padding: 24px 0;
      ul {
        display: flex;
        li {
          display: flex;
          align-items: center;
          margin-left: 24px;
        }
        img {
          width: 24px;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
